import "./index.scss";
import login_pic from "./assets/login_pic.png";
import login_logo from "./assets/login_logo.png";
import login_title_cn from "./assets/login_title_cn.png";
import login_title_en from "./assets/login_title_en.png";
import { Form, Input, Button, message } from "antd";
import { loginPost, type loginBody } from "@/util/request";
import { useDispatch } from "react-redux";
import { setUserInfo } from "@/store/slice/userInfo";
import { type AxiosRes, ResData } from "@/util/http";
import { useNavigate } from "react-router-dom";
function Login() {
	type FieldType = {
		phone: string;
		code: string;
	};
	const [form] = Form.useForm();
	const dispatch = useDispatch();
	const navigate = useNavigate();

	const handleLogin = () => {
		form
			.validateFields()
			.then(async (values: loginBody) => {
				let res = await loginPost(values);
				dispatch(setUserInfo(res));
				message.success("登录成功");
				setTimeout(() => {
					if (!res.has_person_info) {
						navigate("/person_info");
					} else {
						if (res.role === "student") {
							navigate("/exam_select");
						} else if (res.role === "admin") {
							navigate("/corret_exam_list");
						} else if (res.role === "super_admin") {
							navigate("/corret_exam_list");
						}
					}
				}, 500);
			})
			.catch((err) => {
				console.log(err);
			});
	};
	return (
		<div className="login_wrap">
			<div className="login_wrap_main">
				<div className="login_wrap_main_left">
					<img src={login_pic} alt="" />
				</div>
				<div className="login_wrap_main_right">
					<div className="login_wrap_main_right_title">
						<div className="login_wrap_main_right_title_logo">
							<img src={login_logo} alt="" />
						</div>
						<div className="login_wrap_main_right_title_text">
							<img src={login_title_cn} alt="" />
							<img src={login_title_en} alt="" />
						</div>
					</div>
					<div className="login_wrap_main_right_form">
						<Form
							labelCol={{ span: 4 }}
							wrapperCol={{ span: 20 }}
							autoComplete="off"
							form={form}
						>
							<Form.Item<FieldType>
								label="手机号"
								name="phone"
								rules={[{ required: true, message: "请输入手机号!" }]}
							>
								<Input placeholder="请输入手机号" />
							</Form.Item>
							<div style={{ position: "relative" }}>
								<Form.Item<FieldType>
									label="验证码"
									name="code"
									rules={[{ required: true, message: "请输入验证码!" }]}
								>
									<Input placeholder="请输入验证码" maxLength={6} />
								</Form.Item>
								<div className="get_code">获取验证码</div>
							</div>
						</Form>
						<div className="login_btn">
							<Button type="primary" block onClick={handleLogin}>
								登录
							</Button>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}

export default Login;
